<template>
    <div class="nav">
        <el-card>
            <div slot="header" class="df jcsb aic">
                <span>商品分类</span>
                <el-button type="primary" @click="dialogFormVisible = true">添加分类</el-button>
                <!-- 添加的弹窗 -->
                <el-dialog title="添加分类" :visible.sync="dialogFormVisible" :modal="false">

                    <el-form :model="formData" ref="formRef" status-icon :rules="rules">
                        <el-form-item label="分类名称" prop="cateName" :label-width="formLabelWidth">
                            <el-input v-model="formData.cateName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="是否启用" prop="state" :label-width="formLabelWidth">
                            <el-select v-model="formData.state" placeholder="1代表启用-0代表不启用">
                                <el-option label="1" value="1"></el-option>
                                <el-option label="0" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="reset">取 消</el-button>
                        <el-button type="primary" @click="addclassificationbntn">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- table表格 -->
            <el-table :data="tableData">
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="分类名称">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.isEdit">{{ scope.row.cateName }}</span>
                        <el-input v-else size="mini" v-model="scope.row.cateName"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用">
                    <template slot-scope="scope">
                        <el-switch :disabled="!scope.row.isEdit" v-model="scope.row.state" active-color="#13ce66"
                            inactive-color="#ff4949"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button style="margin-right: 5px" size="mini" @click="handleEdit(scope.row)"
                            :type="scope.row.isEdit ? 'success' : 'default'">
                            {{ scope.row.isEdit ? '完成' : '编辑' }}
                        </el-button>

                        <el-button size="mini" @click="handleDel(scope.row)" type="danger">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination class="mt20" :page-size="pageSize" :total="total" :current-page="currentPage"
                @current-change="handleCurrentChange" background layout="total,prev,pager,next,jumper"></el-pagination>
        </el-card>
    </div>
</template>

<script>
import { getCateListReq, editCateReq, addclassification } from '@/api/goods';
// 验证函数
const checkCateName = async (rule, value, callback) => {
    if (!value) {
        callback(new Error('分类名不能为空'))
    } else {
        callback()
    }

}
//数据先行
export default {
    data() {
        return {
            //分类数据
            tableData: [],
            //分页数据
            currentPage: 1,
            pageSize: 3,
            total: 0,
            rules: {
                cateName: [{ validator: checkCateName, trigger: 'blur' }],
                state: [{ required: true, message: '请选择是否启用', trigger: 'blur' }],
            },
            formLabelWidth: "120px",
            dialogFormVisible: false,
            formData: {
                cateName: "",
                state: "",
            },
            tableData: [],
            //分页数据
            currentPage: 1,
            pageSize: 3,
            total: 0,
            value: true,
            data: '',
            form: {

            }
        }
    },
    //方法
    methods: {
        //获取数据方法
        async getData() {
            let currentPage = this.currentPage
            let pageSize = this.pageSize
            //发送请求
            let res = await getCateListReq({
                currentPage,
                pageSize,
            })
            //解构数据
            let { total, data } = res.data
            //修改数据
            data.forEach(v => {
                //把state转换为布尔值
                v.state = v.state === 1 ? true : false
                //添加一个字段 是否可编辑
                v.isEdit = false
            }),
                //数据赋值
                this.total = total
            this.tableData = data

            //如果获取data为[] 且currentPage>1 退回上一页
            if (data.length === 0 && this.currentPage !== 1) {
                this.currentPage--
                this.getData()
            }
        },
        //改变当前页码
        handleCurrentChange(val) {
            this.currentPage = val
            this.getData()
        },
        //编辑
        async handleEdit(row) {
            //把可编辑状态取反
            row.isEdit = !row.isEdit
            //发送请求
            if (!row.isEdit) {
                // 发送请求
                let res = await editCateReq({
                    ...row,
                    state: row.state ? 1 : 0,
                })
            }
        },
        //删除
        handleDel(row) { },
        // 添加
        async addclassificationbntn() {
            this.$refs.formRef.validate(async valid => {
                if (valid) {
                    // console.log(this.form);
                    // 发送请求  
                    let res = await addclassification({ ...this.formData, state: Number(this.formData.state) });
                    // 解构数据
                    let { code } = res.data;
                    // 判断
                    if (code === 0) {
                        //  this.dialogFormVisible= true
                        // 清空后关闭窗口并且刷新
                        this.$refs.formRef.resetFields()
                        this.dialogFormVisible = false
                        this.getData()
                    }
                }
            })
        },
        // 取消时候，关闭并且重置
        reset() {
            this.dialogFormVisible = false
            this.$refs.formRef.resetFields()
        },
    },
    //初始化发送请求
    created() {
        this.getData()
    },
}
</script>

<style lang="scss" scoped>
.nav {
    margin: 20px 0px 0px 20px;
}
</style>
